Composição de Custom Hooks no React: Orquestrando Lógica Complexa para Desenvolvedores Globais

            // useFetch.js
import { useState, useEffect } from 'react';

function useFetch(url, options = {}) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      setError(null);
      try {
        const response = await fetch(url, options);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url, JSON.stringify(options)]); // Dependências para refazer a busca

  return { data, loading, error };
}

export default useFetch;

// usePagination.js
import { useState } from 'react';

function usePagination(totalPages, initialPage = 1) {
  const [currentPage, setCurrentPage] = useState(initialPage);

  const nextPage = () => {
    if (currentPage < totalPages) {
      setCurrentPage(currentPage + 1);
    }
  };

  const prevPage = () => {
    if (currentPage > 1) {
      setCurrentPage(currentPage - 1);
    }
  };

  const goToPage = (page) => {
    if (page >= 1 && page <= totalPages) {
      setCurrentPage(page);
    }
  };

  return {
    currentPage,
    totalPages,
    nextPage,
    prevPage,
    goToPage,
    setPage: setCurrentPage // Setter direto se necessário
  };
}

export default usePagination;

// usePaginatedFetch.js (Hook Composto)
import useFetch from './useFetch';
import usePagination from './usePagination';

function usePaginatedFetch(baseUrl, initialPage = 1, itemsPerPage = 10) {
  // Precisamos saber o total de páginas para inicializar o usePagination. Isso pode exigir uma busca inicial ou uma fonte externa.
  // Para simplificar aqui, vamos assumir que totalPages é conhecido ou buscado separadamente primeiro.
  // Uma solução mais robusta buscaria o total de páginas primeiro ou usaria uma abordagem de paginação orientada pelo servidor.

  // Placeholder para totalPages - em uma aplicação real, isso viria de uma resposta da API.
  const [totalPages, setTotalPages] = useState(1);
  const [apiData, setApiData] = useState(null);
  const [fetchLoading, setFetchLoading] = useState(true);
  const [fetchError, setFetchError] = useState(null);

  // Usa o hook de paginação para gerenciar o estado da página
  const { currentPage, ...paginationControls } = usePagination(totalPages, initialPage);

  // Constrói a URL para a página atual
  const apiUrl = `${baseUrl}?page=${currentPage}&limit=${itemsPerPage}`;

  // Usa o hook de busca para obter os dados da página atual
  const { data: pageData, loading: pageLoading, error: pageError } = useFetch(apiUrl);

  // Efeito para atualizar totalPages e os dados quando pageData muda ou a busca inicial acontece
  useEffect(() => {
    if (pageData) {
      // Assumindo que a resposta da API tem uma estrutura como { items: [...], total: N }
      setApiData(pageData.items || pageData);
      if (pageData.total !== undefined && pageData.total !== totalPages) {
        setTotalPages(Math.ceil(pageData.total / itemsPerPage));
      } else if (Array.isArray(pageData)) { // Fallback se o total não for fornecido
        setTotalPages(Math.max(1, Math.ceil(pageData.length / itemsPerPage)));
      }
      setFetchLoading(false);
    } else {
      setApiData(null);
      setFetchLoading(pageLoading);
    }
    setFetchError(pageError);
  }, [pageData, pageLoading, pageError, itemsPerPage, totalPages]);

  return {
    data: apiData,
    loading: fetchLoading,
    error: fetchError,
    ...paginationControls // Espalha os controles de paginação (nextPage, prevPage, etc.)
  };
}

export default usePaginatedFetch;

            

              
                Copy
              
            
          

            
import React from 'react';
import usePaginatedFetch from './usePaginatedFetch';

function ProductList() {
  const apiUrl = 'https://api.example.com/products'; // Substitua pelo endpoint da sua API
  const { data: products, loading, error, nextPage, prevPage, currentPage, totalPages } = usePaginatedFetch(apiUrl, 1, 5);

  if (loading) return 
Loading products...
;
  if (error) return 
Error loading products: {error.message}
;
  if (!products || products.length === 0) return 
No products found.
;

  return (
    

      
Products
      

        {products.map(product => (
          
{product.name}
        ))}
      
      

        Previous
         Page {currentPage} of {totalPages} 
        Next
      
    
  );
}

export default ProductList;

            

              
                Copy
              
            
          

            // useWebSocket.js (Hook auxiliar para WebSocket)
import { useState, useEffect } from 'react';

function useWebSocket(url) {
  const [message, setMessage] = useState(null);
  const [isConnecting, setIsConnecting] = useState(true);
  const [isConnected, setIsConnected] = useState(false);

  useEffect(() => {
    if (!url) return;
    setIsConnecting(true);
    setIsConnected(false);
    const ws = new WebSocket(url);

    ws.onopen = () => {
      console.log('WebSocket Connected');
      setIsConnected(true);
      setIsConnecting(false);
    };

    ws.onmessage = (event) => {
      try {
        const data = JSON.parse(event.data);
        setMessage(data);
      } catch (e) {
        console.error('Error parsing WebSocket message:', e);
        setMessage(event.data); // Lida com mensagens que não são JSON se necessário
      }
    };

    ws.onclose = () => {
      console.log('WebSocket Disconnected');
      setIsConnected(false);
      setIsConnecting(false);
      // Opcional: Implemente a lógica de reconexão aqui
    };

    ws.onerror = (error) => {
      console.error('WebSocket Error:', error);
      setIsConnected(false);
      setIsConnecting(false);
    };

    // Função de limpeza
    return () => {
      if (ws.readyState === WebSocket.OPEN) {
        ws.close();
      }
    };
  }, [url]);

  return { message, isConnecting, isConnected };
}

export default useWebSocket;

// useFetchWithRealtime.js (Hook Composto)
import useFetch from './useFetch';
import useWebSocket from './useWebSocket';

function useFetchWithRealtime(fetchUrl, realtimeUrl, initialData = null) {
  const fetchResult = useFetch(fetchUrl);
  // Assumindo que as atualizações em tempo real são baseadas no mesmo recurso ou em um relacionado
  // A estrutura das mensagens em tempo real precisa estar alinhada com a forma como atualizamos fetchResult.data
  const { message: realtimeMessage } = useWebSocket(realtimeUrl);

  const [combinedData, setCombinedData] = useState(initialData);
  const [isRealtimeUpdating, setIsRealtimeUpdating] = useState(false);

  // Efeito para integrar as atualizações em tempo real com os dados buscados
  useEffect(() => {
    if (fetchResult.data) {
      // Inicializa combinedData com os dados da busca inicial
      setCombinedData(fetchResult.data);
      setIsRealtimeUpdating(false);
    }
  }, [fetchResult.data]);

  useEffect(() => {
    if (realtimeMessage && fetchResult.data) {
      setIsRealtimeUpdating(true);
      // Lógica para mesclar ou substituir dados com base em realtimeMessage
      // Isso é altamente dependente da sua API e da estrutura da mensagem em tempo real.
      // Exemplo: Se realtimeMessage contém um item atualizado para uma lista:
      if (Array.isArray(fetchResult.data)) {
        setCombinedData(prevData => {
          const updatedItems = prevData.map(item =>
            item.id === realtimeMessage.id ? { ...item, ...realtimeMessage } : item
          );
          // Se a mensagem em tempo real for para um novo item, você pode adicioná-lo.
          // Se for para um item excluído, você pode filtrá-lo.
          return updatedItems;
        });
      } else if (typeof fetchResult.data === 'object' && fetchResult.data !== null) {
        // Exemplo: Se for uma atualização de um único objeto
        if (realtimeMessage.id === fetchResult.data.id) {
          setCombinedData({ ...fetchResult.data, ...realtimeMessage });
        }
      }
      // Reseta a flag de atualização após um curto atraso ou lida de forma diferente
      const timer = setTimeout(() => setIsRealtimeUpdating(false), 500);
      return () => clearTimeout(timer);
    }
  }, [realtimeMessage, fetchResult.data]); // Dependências para reagir às atualizações

  return {
    data: combinedData,
    loading: fetchResult.loading,
    error: fetchResult.error,
    isRealtimeUpdating
  };
}

export default useFetchWithRealtime;

            

              
                Copy
              
            
          

            
import React from 'react';
import useFetchWithRealtime from './useFetchWithRealtime';

function DashboardWidgets() {
  const dataUrl = 'https://api.example.com/widgets';
  const wsUrl = 'wss://api.example.com/widgets/updates'; // Endpoint do WebSocket

  const { data: widgets, loading, error, isRealtimeUpdating } = useFetchWithRealtime(dataUrl, wsUrl);

  if (loading) return 
Loading widgets...
;
  if (error) return 
Error: {error.message}
;

  return (
    

      
Widgets
      {isRealtimeUpdating && 
Updating...
}
      

        {widgets.map(widget => (
          
{widget.name} - Status: {widget.status}
        ))}
      
    
  );
}

export default DashboardWidgets;

            

              
                Copy
              
            
          

            // useLocalStorage.js
import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error('Error reading from localStorage:', error);
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      const valueToStore = typeof value === 'function' ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error('Error writing to localStorage:', error);
    }
  };

  return [storedValue, setValue];
}

export default useLocalStorage;

// UserPreferencesContext.js
import React, { createContext, useContext } from 'react';
import useLocalStorage from './useLocalStorage';

const UserPreferencesContext = createContext();

export const UserPreferencesProvider = ({ children }) => {
  const [theme, setTheme] = useLocalStorage('app-theme', 'light');
  const [language, setLanguage] = useLocalStorage('app-language', 'en');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  const changeLanguage = (lang) => {
    setLanguage(lang);
  };

  return (
    
      {children}
    
  );
};

// useUserPreferences.js (Custom hook para consumir o contexto)
import { useContext } from 'react';
import { UserPreferencesContext } from './UserPreferencesContext';

function useUserPreferences() {
  const context = useContext(UserPreferencesContext);
  if (context === undefined) {
    throw new Error('useUserPreferences must be used within a UserPreferencesProvider');
  }
  return context;
}

export default useUserPreferences;

            

              
                Copy
              
            
          

            
// App.js
import React from 'react';
import { UserPreferencesProvider } from './UserPreferencesContext';
import UserProfile from './UserProfile';
import SettingsPanel from './SettingsPanel';

function App() {
  return (
    
      
      
    
  );
}

export default App;

// UserProfile.js
import React from 'react';
import useUserPreferences from './useUserPreferences';

function UserProfile() {
  const { theme, language } = useUserPreferences();

  return (
    

      
User Profile
      
Language: {language}
      
Current Theme: {theme}
    
  );
}

export default UserProfile;

// SettingsPanel.js
import React from 'react';
import useUserPreferences from './useUserPreferences';

function SettingsPanel() {
  const { theme, toggleTheme, language, changeLanguage } = useUserPreferences();

  return (
    

      
Settings
      
        Switch to {theme === 'light' ? 'Dark' : 'Light'} Mode
      
      

        Language:
         changeLanguage(e.target.value)}>
          English
          Español
          Français
          {/* Adicione mais idiomas conforme necessário */}
        
      
    
  );
}

export default SettingsPanel;

            

              
                Copy
              
            
          

            // useCounter.js (Um hook simples para registrar)
import { useState } from 'react';

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(c => c + 1);
  const decrement = () => setCount(c => c - 1);

  return { count, increment, decrement };
}

export default useCounter;

// withLogging.js (Higher-order hook)
import { useRef, useEffect } from 'react';

function withLogging(WrappedHook) {
  // Retorna um novo hook que envolve o original
  return (...args) => {
    const hookResult = WrappedHook(...args);
    const hookName = WrappedHook.name || 'AnonymousHook'; // Obtém o nome do hook para o log
    const previousResultRef = useRef();

    useEffect(() => {
      if (previousResultRef.current) {
        console.log(`%c[${hookName}] Change detected:`, 'color: blue; font-weight: bold;', {
          previous: previousResultRef.current,
          current: hookResult
        });
      } else {
        console.log(`%c[${hookName}] Initial render:`, 'color: green; font-weight: bold;', hookResult);
      }
      previousResultRef.current = hookResult;
    }, [hookResult, hookName]); // Re-executa o efeito se hookResult ou hookName mudar

    return hookResult;
  };
}

export default withLogging;

            

              
                Copy
              
            
          

            
import React from 'react';
import useCounter from './useCounter';
import withLogging from './withLogging';

// Cria uma versão com log do useCounter
const useLoggedCounter = withLogging(useCounter);

function CounterComponent() {
  // Usa o hook aprimorado
  const { count, increment, decrement } = useLoggedCounter(0);

  return (
    

      
Counter
      
Count: {count}
      Increment
      Decrement
    
  );
}

export default CounterComponent;

            

              
                Copy